 <template>                                                                                
  <Modal                                                                                   
    v-model="isshowmodal"                                                                            
    :title="title"                                                                                   
    :width="width"                                                                                   
    :footer-hide="hidefooter"                                                                        
    :loading="loading"                                                                               
    :closable="hidefooter == true"                                                                   
    :mask="true"                                                                                     
    v-draggable="options"                                                                            
    :sticky="true"                                                                                   
    scrollable                                                                                         
    :mask-closable="false"                                                                           
    class-name="vertical-center-modal"                                                               
  >                                                                                                    
    <div>                                                                                              
      <Form :model="dataFrom" :rules="rules" ref="ruleForm" :label-width="80">                 
        <Row>                                                                                          
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="UserId">                                                               
              <Input v-model="dataFrom['UserId']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="OpType">                                                               
              <Input v-model="dataFrom['OpType']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
        </Row>                                                                                         
                                                                                                       
        <Row>                                                                                          
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="ActUserId">                                                               
              <Input v-model="dataFrom['ActUserId']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="ActUserName">                                                               
              <Input v-model="dataFrom['ActUserName']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
        </Row>                                                                                         
                                                                                                       
        <Row>                                                                                          
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="RepoId">                                                               
              <Input v-model="dataFrom['RepoId']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="RepoUserName">                                                               
              <Input v-model="dataFrom['RepoUserName']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
        </Row>                                                                                         
                                                                                                       
        <Row>                                                                                          
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="RepoName">                                                               
              <Input v-model="dataFrom['RepoName']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="RefName">                                                               
              <Input v-model="dataFrom['RefName']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
        </Row>                                                                                         
                                                                                                       
        <Row>                                                                                          
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="IsPrivate">                                                               
              <Input v-model="dataFrom['IsPrivate']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="Content">                                                               
              <Input v-model="dataFrom['Content']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
        </Row>                                                                                         
                                                                                                       
        <Row>                                                                                          
                                                                                                       
          <Col span="12">                                                                            
            <Form-item label="CreatedUnix">                                                               
              <Input v-model="dataFrom['CreatedUnix']" placeholder="请输入"></Input>                    
            </Form-item>                                                                               
          </Col>                                                                                       
        </Row>                                                                                         
      </Form>                                                                                          
    </div>                                                                                             
                                                                                                       
    <div slot="footer">                                                                              
      <Button                                                                                          
        type="text"                                                                                  
        size="large"                                                                                 
        @click="handleClose(false)"                                                                  
        :disabled="disabled"                                                                         
        >取消</Button                                                                                  
      >                                                                                                
      <Button                                                                                          
        type="primary"                                                                               
        size="large"                                                                                 
        @click="handleSubmit"                                                                        
        :loading="btnloading"                                                                        
        :disabled="disabled"                                                                         
        >确定</Button                                                                                  
      >                                                                                                
    </div>                                                                                             
    <div slot="close">                                                                               
      <a><Icon type="ios-close" @click="handleClose(false)" /></a>                                 
    </div>                                                                                             
  </Modal>                                                                                             
</template>                                                                                            
<script>                                                                                               
import axios from "@/libs/api.request";                                                              
export default {                                                                                       
  // 父组件传来的值                                                                                    
  props: {                                                                                             
    baseuri: { type: String, default: "" },                                                          
    title: { type: String, default: "操作" },                                                        
    isshowmodal: { type: Boolean, default: false },                                                    
    hidefooter: { type: Boolean, default: false },                                                     
    width: { type: Number, default: 650 },                                                             
    index: { type: Number, default: -1 },                                                              
    tablekey: { type: String, default: null },                                                         
    keyId: { default: null },                                                                          
  },                                                                                                   
  data() {                                                                                             
    // 这里存放数据                                                                                    
    return {                                                                                           
      options: {                                                                                       
        trigger: ".ivu-modal-header",                                                                
        body: ".ivu-modal",                                                                          
        recover: true,                                                                                 
      },                                                                                               
      loading: false,                                                                                  
      btnloading: false,                                                                               
      disabled: false,                                                                                 
                                                                                                       
      dataFrom: { type: Object, default: {} },                                                         
      ruleForm: { RepoId: { type: Number } },                                                          
      rules: {                                                                                         
        RepoId: [                                                                                      
          {                                                                                            
            required: true,                                                                            
            message: "RepoId不能为空",                                                               
            trigger: "blur",                                                                         
            type: "number",                                                                          
          },                                                                                           
        ],                                                                                             
      },                                                                                               
    };                                                                                                 
  },                                                                                                   
  watch: {                                                                                             
    keyId(e) {                                                                                         
      if (e !== null) {                                                                                
        this.initdata(e);                                                                              
      }                                                                                                
    },                                                                                                 
  },                                                                                                   
  // 方法集合                                                                                          
  methods: {                                                                                           
    initdata: function (keyId) {                                                                       
      this.loading = true;                                                                             
      this.dataFrom = {};                                                                              
      // 初始化页面内容                                                                                
      axios                                                                                            
        .request({                                                                                     
          url: `${this.baseuri}?${this.tablekey}=` + keyId,                                                 
          method: "get",                                                                             
        })                                                                                             
        .then((res) => {                                                                               
          this.dataFrom = res.data.data;                                                               
        })                                                                                             
        .catch((error) => {                                                                            
          console.log(error);                                                                          
        })                                                                                             
        .finally((x) => {                                                                              
          this.loading = false;                                                                        
        });                                                                                            
    },                                                                                                 
                                                                                                       
    handleSubmit() {                                                                                   
      this.btnloading = this.disabled = true;                                                          
      this.$refs["ruleForm"].validate((valid) => {                                                   
        if (valid) {                                                                                   
          if (this.keyId == null) {                                                                    
            this.add(this.dataFrom);                                                                   
          } else {                                                                                     
            this.update(this.dataFrom);                                                                
          }                                                                                            
        } else {                                                                                       
          this.$Message.error("表单验证失败!");                                                      
          this.btnloading = this.disabled = false;                                                     
        }                                                                                              
      });                                                                                              
    },                                                                                                 
    handleReset() {                                                                                    
      this.$nextTick(() => {                                                                           
        this.$refs["ruleForm"].resetFields();                                                        
      });                                                                                              
    },                                                                                                 
                                                                                                       
    add(data) {                                                                                        
      axios                                                                                            
        .request({                                                                                     
          url: this.baseuri,                                                                           
          method: "post",                                                                            
          data,                                                                                        
        })                                                                                             
        .then((res) => {                                                                               
          if (res.data.code === 200) {                                                                 
            this.$Message.success({                                                                    
              content: "保存成功！",                                                                 
              duration: 3,                                                                             
              closable: true,                                                                          
              onClose: () => {                                                                         
                this.handleClose(true);                                                                
                this.dataFrom = {};                                                                    
                this.btnloading = this.disabled = false;                                               
              },                                                                                       
            });                                                                                        
          } else {                                                                                     
            this.$Message.error({                                                                      
              content: res.data.msg,                                                                   
              duration: 2,                                                                             
              closable: true,                                                                          
              onClose: () => {                                                                         
                this.btnloading = this.disabled = false;                                               
              },                                                                                       
            });                                                                                        
          }                                                                                            
        })                                                                                             
        .catch(function (error) {});                                                                   
    },                                                                                                 
    update(data) {                                                                                     
      this.$Modal.confirm({                                                                            
        title: "提示",                                                                               
        content: "确定提交修改?",                                                                    
        onOk: () => {                                                                                  
          axios                                                                                        
            .request({                                                                                 
              url: this.baseuri,                                                                       
              method: "put",                                                                         
              data,                                                                                    
            })                                                                                         
            .then((res) => {                                                                           
              if (res.data.code === 200) {                                                             
                this.$Message.success({                                                                
                  content: "保存成功！",                                                             
                  duration: 3,                                                                         
                  closable: true,                                                                      
                  onClose: () => {                                                                     
                    this.handleClose(true);                                                            
                    this.btnloading = this.disabled = false;                                           
                  },                                                                                   
                });                                                                                    
              } else {                                                                                 
                this.$Message.error({                                                                  
                  content: res.data.msg,                                                               
                  duration: 2,                                                                         
                  closable: true,                                                                      
                  onClose: () => {                                                                     
                    this.btnloading = this.disabled = false;                                           
                  },                                                                                   
                });                                                                                    
              }                                                                                        
            })                                                                                         
            .catch(function (error) {});                                                               
        },                                                                                             
        onCancel: () => {                                                                              
          this.btnloading = this.disabled = false;                                                     
        },                                                                                             
      });                                                                                              
    },                                                                                                 
                                                                                                       
    // 关闭子页面                                                                                      
    handleClose(isok) {                                                                                
      this.$emit("on-close", {                                                                       
        isok: isok,                                                                                    
        index: this.index,                                                                             
        dataFrom: this.dataFrom,                                                                       
      });                                                                                              
    },                                                                                                 
  },                                                                                                   
  // 监听属性 类似于data概念                                                                           
  computed: {},                                                                                        
};                                                                                                     
</script>                                                                                              
<style scoped>                                                                                         
.ml10 {                                                                                                
  margin-left: 10px;                                                                                   
}                                                                                                      
.vertical-center-modal {                                                                               
  display: flex;                                                                                       
  align-items: center;                                                                                 
  justify-content: center;                                                                             
}                                                                                                      
.ivu-modal {                                                                                           
  top: 30;                                                                                             
}                                                                                                      
</style>                                                                                               
